<template>
    <div class="item" @click="godetail(item)">
        <div class="tip">
            <img v-if="item.slug && [1,2,3,4,'1','2','3','4'].indexOf(item.slug)>-1" :src="require(`../../assets/images/flog${item.slug||1}.png`)" />
        </div>
        <div class="img">
            <img :src="item.image" />
        </div>
        <div class="flex1">
            <div class="title van-ellipsis">{{item.title}}</div>
            <div class="van-multi-ellipsis--l2">{{item.description}}</div>
        </div>
    </div>
</template>
<style lang="less" scoped>
.item {
    margin-bottom: 20 / 2px;
    background: @bgcolor;
    padding: 10 / 2px;
    display: flex;
    border-radius: 10 / 2px;
    position: relative;
    .tip {
        position: absolute;
        left: 0;
        top: 0;
        img {
            width: 60 / 2px;
        }
    }
    .img {
        width: 260 / 2px;
        height: 180 / 2px;
        margin-right: 30 / 2px;
        border-radius: 10 / 2px;
        overflow: hidden;
        img {
            display: block;
            height: 100%;
            width: 100%;
        }
    }
    .flex1 {
        flex: 1;
        overflow: hidden;
        .title {
            font-size: 30 / 2px;
            margin-bottom: 40 / 2px;
            margin-top: 20 / 2px;
        }
        .van-multi-ellipsis--l2 {
            font-size: 24 / 2px;
            line-height: 35 / 2px;
            color: #ffffff90;
        }
    }
}
</style>
<script>
export default {
    props: ['item'],
    data () {
        return {
        }
    },
    methods:{
        godetail (item) {
            this.$router.push({
                path:'/detail',
                query:{
                    id: item.id,
                    title: item.title
                }
            })
        }
    }
};
</script>